<template>
    <div>
        <table class='a'>
            <tr>
                <th>序号&nbsp;&nbsp;&nbsp;</th>
                <th>商品名称&nbsp;&nbsp;&nbsp;</th>
                <th>商品价格&nbsp;&nbsp;&nbsp;</th>
                <th>购买数量&nbsp;&nbsp;&nbsp;</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, index) in cart_list" :key="index">
                <td>{{ index+1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td><Button @click="item.num--" color='blue'>-</Button>{{ item.num }}<Button @click="item.num++" color='blue'>+</Button></td>
                <td><Button @click='remove(index)' color='red'>移除</Button></td>
            </tr>
        </table>

        <br>

        
        <p>总价: {{ cart_count }}</p>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                cart_list:[{name:'iphone 8',price:5099,num:3},{name:'iphone xs',price:8699,num:1},{name:'iphonexr',price:6499,num:1}],
                
             
            }
        },
        //计算属性
        computed: {
            cart_count:function(){
                var list = this.cart_list;
                var num = 0;
                var price = 0;
                for (var index = 0; index < list.length; index++){
                    price += list[index].price * list[index].num;

                }
                this.count = price
                return this.count
            },
            remove:function(index){
                this.list[index].count = 1
            }
        },

    }
</script>

<style>

.a {
    border-color: black;   
    border: 1px solid black
}

</style>